<template>
  <view class="admin-index-page">
    <view class="page-header">
      <view class="header-left">
        <text class="header-title">炫壁管理后台</text>
      </view>
      <view class="header-right">
        <text class="admin-info">欢迎，{{ adminInfo.username }}</text>
        <view class="icon icon-arrow-right" style="font-size: 16px; color: #999;">›</view>
      </view>
    </view>
    
    <!-- 统计卡片 -->
    <view class="stats-section">
      <view class="stat-card" @click="navigateToWallpapers">
        <view class="icon icon-image" style="font-size: 32px; color: #007aff;">🖼️</view>
        <view class="stat-info">
          <text class="stat-number">{{ stats.wallpaperCount }}</text>
          <text class="stat-label">壁纸总数</text>
        </view>
      </view>
      <view class="stat-card" @click="navigateToCategories">
        <view class="icon icon-grid" style="font-size: 32px; color: #52c41a;">📊</view>
        <view class="stat-info">
          <text class="stat-number">{{ stats.categoryCount }}</text>
          <text class="stat-label">分类数量</text>
        </view>
      </view>
    </view>
    
    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-title">壁纸管理</view>
      <view class="menu-grid">
        <view class="menu-item" @click="navigateToWallpapers">
          <view class="icon icon-image" style="font-size: 32px; color: #ff6b3b;">🖼️</view>
          <text class="menu-text">壁纸列表</text>
        </view>
        <view class="menu-item" @click="navigateToUploadWallpaper">
          <view class="icon icon-plus-circle" style="font-size: 32px; color: #52c41a;">➕</view>
          <text class="menu-text">上传壁纸</text>
        </view>
      </view>
    </view>
    
    <view class="menu-section">
      <view class="menu-title">分类管理</view>
      <view class="menu-grid">
        <view class="menu-item" @click="navigateToCategories">
          <view class="icon icon-grid" style="font-size: 32px; color: #722ed1;">📊</view>
          <text class="menu-text">分类列表</text>
        </view>
        <view class="menu-item" @click="navigateToAddCategory">
          <view class="icon icon-add-circle" style="font-size: 32px; color: #1890ff;">➕</view>
          <text class="menu-text">新增分类</text>
        </view>
      </view>
    </view>
    
    <view class="menu-section">
      <view class="menu-title">系统管理</view>
      <view class="menu-grid">
        <view class="menu-item" @click="navigateToFeedback">
          <view class="icon icon-chatbubble" style="font-size: 32px; color: #faad14;">💬</view>
          <text class="menu-text">用户反馈</text>
        </view>
        <view class="menu-item" @click="navigateToUsers">
          <view class="icon icon-person" style="font-size: 32px; color: #13c2c2;">👤</view>
          <text class="menu-text">用户管理</text>
        </view>
        <view class="menu-item" @click="navigateToBannerManagement">
          <view class="icon icon-image" style="font-size: 32px; color: #722ed1;">🖼️</view>
          <text class="menu-text">轮播图管理</text>
        </view>
        <view class="menu-item" @click="navigateToFeaturedManagement">
          <view class="icon icon-star" style="font-size: 32px; color: #ff9500;">⭐</view>
          <text class="menu-text">热门推荐管理</text>
        </view>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <button class="logout-btn" type="default" @click="showLogoutConfirm">
      退出登录
    </button>
  </view>
</template>

<script setup>

import { ref,computed } from 'vue';
import {onLoad, onShow } from "@dcloudio/uni-app"
// 状态管理
const adminInfo = ref({ username: '管理员' });
const stats = ref({
  wallpaperCount: 128,
  categoryCount: 16
});

onLoad(() => {
  // 直接加载管理员信息，不进行权限校验
  adminInfo.value = uni.getStorageSync('admin_info') || { username: '管理员' };
  useMockStats();
});

// 模拟统计数据
const mockStats = {
  wallpaperCount: 128,
  categoryCount: 8,
  userCount: 512,
  feedbackCount: 24
};

// 管理员权限校验已移除，直接使用管理员信息

// 加载管理员信息
const loadAdminInfo = () => {
  const storedInfo = uni.getStorageSync('admin_info');
  if (storedInfo) {
    adminInfo.value = storedInfo;
  }
};

// 加载统计数据
const loadStats = async () => {
  try {
    // 尝试调用云函数获取统计数据
    try {
      const res = await uniCloud.callFunction({ name: 'admingetStats' });
      if (res && res.result) {
        stats.value = res.result;
      } else {
        console.log('获取统计数据失败，使用模拟数据');
        useMockStats();
      }
    } catch (cloudError) {
      console.log('获取统计数据云函数失败，使用模拟数据:', cloudError);
      useMockStats();
    }
  } catch (error) {
    console.error('加载统计数据失败:', error);
    useMockStats();
  }
};

// 使用模拟统计数据
const useMockStats = () => {
  stats.value = mockStats;
};

// 导航到壁纸列表
const navigateToWallpapers = () => {
  uni.navigateTo({
    url: '/pages/admin/wallpaper-list'
  });
};

// 导航到上传壁纸
const navigateToUploadWallpaper = () => {
  uni.navigateTo({
    url: '/pages/admin/upload-wallpaper'
  });
};

// 导航到分类列表
const navigateToCategories = () => {
  uni.navigateTo({
    url: '/pages/admin/category-list'
  });
};

// 导航到新增分类
const navigateToAddCategory = () => {
  uni.navigateTo({
    url: '/pages/admin/add-category'
  });
};

// 导航到用户反馈
const navigateToFeedback = () => {
  uni.navigateTo({
    url: '/pages/admin/feedback-list'
  });
};

// 导航到用户管理
const navigateToUsers = () => {
  uni.navigateTo({
    url: '/pages/admin/user-management'
  });
  uni.showToast({ 
    title: '用户管理功能开发中', 
    icon: 'none'
  });
};

// 导航到轮播图管理
const navigateToBannerManagement = () => {
  uni.navigateTo({
    url: '/pages/admin/banner-management'
  });
};

const navigateToFeaturedManagement = () => {
  uni.navigateTo({
    url: '/pages/admin/featured-management'
  });
};

// 显示退出登录确认
const showLogoutConfirm = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: async (res) => {
      if (res.confirm) {
        await logout();
      }
    }
  });
};

// 退出登录
const logout = async () => {
  try {
    // 清除管理员状态
    uni.removeStorageSync('admin_token');
    uni.removeStorageSync('admin_info');
    
    // 跳转到登录页面
    uni.redirectTo({
      url: '/pages/admin/login'
    });
  } catch (error) {
    console.error('退出登录失败:', error);
    uni.showToast({ 
      title: '退出失败',
      icon: 'none'
    });
  }
};
</script>

<style scoped lang="less">
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-index-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 40px;
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: #fff;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    .header-left {
      .header-title {
        font-size: 20px;
        font-weight: 600;
        color: #333;
      }
    }
    
    .header-right {
      display: flex;
      align-items: center;
      
      .admin-info {
        font-size: 14px;
        color: #666;
        margin-right: 4px;
      }
    }
  }
  
  .stats-section {
    display: flex;
    gap: 16px;
    padding: 0 16px;
    margin-bottom: 24px;
    
    .stat-card {
      flex: 1;
      background-color: #fff;
      border-radius: 12px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      &:active {
        transform: scale(0.98);
      }
      
      .stat-info {
        flex: 1;
        
        .stat-number {
          display: block;
          font-size: 24px;
          font-weight: 600;
          color: #333;
          margin-bottom: 4px;
        }
        
        .stat-label {
          font-size: 14px;
          color: #666;
        }
      }
    }
  }
  
  .menu-section {
    padding: 0 16px;
    margin-bottom: 24px;
    
    .menu-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-bottom: 12px;
    }
    
    .menu-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      
      .menu-item {
        background-color: #fff;
        border-radius: 12px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        
        &:active {
          transform: scale(0.98);
        }
        
        .menu-text {
          font-size: 16px;
          color: #333;
        }
      }
    }
  }
  
  .logout-btn {
    margin: 0 16px;
    background-color: #f5222d;
    color: #fff;
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    border-radius: 24px;
    
    &:active {
      background-color: #d32424;
    }
  }
}
</style>